<template>
  <div class="com-header">
    <div class="header-left">
      <el-button type="primary" :icon="ArrowLeft" @click="goBack">返回</el-button>
    </div>
    <div class="header-middle">
      <div>油气集输站中心监控系统</div>
    </div>
    <div class="header-right">
      <el-button-group>
        <el-button type="primary" :icon="Avatar" @click="gotoPersonalCenter">个人中心</el-button>
        <el-button type="primary" :icon="Refresh" @click="refresh">刷新</el-button>
        <el-button type="primary" :icon="SwitchButton" @click="logoutDialogVisible = true">
          退出
        </el-button>
      </el-button-group>
    </div>

    <el-dialog v-model="logoutDialogVisible" title="退出登录" width="40%">
      <span>确定退出登录吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logoutDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="logout">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Header">
import { useRouter } from 'vue-router'
import { useUser } from '../hooks/useUser'
import { Avatar, ArrowLeft, SwitchButton, Refresh } from '@element-plus/icons-vue'
const { logoutDialogVisible, logout } = useUser()
const router = useRouter()
function goBack() {
  router.back()
}
function gotoPersonalCenter() {
  router.push('/personalCenter')
}
function refresh() {
  window.location.reload()
}
</script>
<style lang="less" scoped>
.com-header {
  height: 100%;
  padding: 0 20px;
  background: #3f51b5;
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .header-left {
    justify-content: flex-start;
  }
  .header-middle {
    justify-content: center;
  }
  .header-right {
    justify-content: flex-end;
  }
}
</style>
